<template>
  <view class="main-container">
    <HeaderBar
        title="一机游阿坝"
        :titleColor="titleColor"
        :navBarBgc="headerBgc"
        :isFixed="true"
        :isShowBackIcon="false"
    ></HeaderBar>
    <view class="swiper-container">
      <wd-swiper
          :list="swiperImgList"
          :indicator="false"
          value-key="imgUrl"
          height="283"
      ></wd-swiper>
    </view>
    <view class="search-container">

      <view class="input-container">
        <wd-input type="text" custom-class="custom-search-input-class" v-model="searchValue" placeholder="搜索" />
      </view>
      <view class="search-btn-container" @click="handleSearch">
        <wd-icon name="search" size="22px" color="#ffffff"></wd-icon>
      </view>
    </view>
    <view class="banner-container" >
      <view
          class="banner-item"
          v-for="(item,index) in homeBannerList" :key="index"
          v-if="loadingBanner"
          @click="handleNavToParty(item)"
      >
        <img class="banner-img" :src="item.imgUrl" alt="">
        <span class="banner-title">{{item.title}}</span>
      </view>
      <wd-skeleton
          v-else
          :custom-style="{ width: '100%', display: 'flex',justifyContent: 'space-between' }"
          :row-col="grid"
          animation="gradient"
          theme="paragraph"
      />
    </view>

    <view class="service-container">
      <view class="left-service-container">
        <view class="service-item" @click="gotoFiveMajor('influence')">
          <img class="service-item-img" src="http://img.jowong.com/aba/2025-03-19/阿坝一机游第二版.cdr_282894_1742366377454.png" alt="">
        </view>
        <view class="service-item"  @click="gotoFiveMajor('homestay')">
          <img class="service-item-img" src="http://img.jowong.com/aba/2025-03-19/阿坝一机游第二版.cdr_247706_1742366142047.png" alt="">
        </view>
      </view>
      <view class="right-service-container">
        <view class="service-item">
          <img class="service-item-img" @click="gotoFiveMajor('selfDriving')"  src="http://img.jowong.com/aba/2025-03-19/阿坝一机游第二版.cdr_247696_1742366258361.png" alt="">
        </view>
        <view class="service-item">
          <img class="service-item-img" @click="gotoFiveMajor('studyAboard')" src="http://img.jowong.com/aba/2025-03-19/阿坝一机游第二版.cdr_247699_1742366289252.png" alt="">
        </view>
        <view class="service-item" @click="gotoFiveMajor('hospitable')">
          <img class="service-item-img" src="http://img.jowong.com/aba/2025-03-19/阿坝一机游第二版.cdr_247702_1742366320528.png" alt="">
        </view>
      </view>
    </view>

    <!--  探索之旅  -->
    <view class="phase-container">
      <img class="phase-img" src="http://img.jowong.com/aba/2025-03-19/tansuo_1742367197375.png" alt="">
    </view>
    <scroll-view
        class="explore-container"
        :scroll-x="true"
        :show-scrollbar="false"
    >
      <view class="explore-item-container">
		<view class="explore-title">景区</view>
        <image
            class="explore-img"
            src="http://img.jowong.com/aba/2025-03-19/1_1742367483483.png"
            lazy-load
        />
        <view class="product-list-container" v-if="exploreList[0] && exploreList[0].length > 0">
            <view
                class="product-item-container"
                v-for="(productItem,productIndex) in exploreList[0]"
                :key="productIndex"
            >
              <view class="product-info-container">
                <image class="product-img" :src="productItem.imgUrl"></image>
                <view class="product-content-container">
                  <view class="product-name">{{productItem.title}}</view>
                  <view class="product-description">{{productItem.subTitle}}</view>
                </view>
              </view>
            </view>
        </view>
      </view>
      <view class="explore-item-container">
		<view class="explore-title">酒店</view>
        <img
            class="explore-img"
            src="http://img.jowong.com/aba/2025-03-19/2_1742370179335.png"
        />
        <view class="product-list-container" v-if="exploreList[1] && exploreList[1].length > 0">
          <view
              class="product-item-container"
              v-for="(productItem,productIndex) in exploreList[1]"
              :key="productIndex"
          >
            <view class="product-info-container">
              <image class="product-img" :src="productItem.imgUrl"></image>
              <view class="product-content-container">
                <view class="product-name">{{productItem.title}}</view>
                <view class="product-description">{{productItem.subTitle}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!--  地图带你游  -->
    <view class="map-container">
      <img class="map-img" src="http://img.jowong.com/aba/2025-03-19/ditu_1742373357538.png" alt="">
    </view>
    <scroll-view
        class="scenic-spot-map-container"
        :scroll-x="true"
        :show-scrollbar="false"
    >
      <view class="scenic-spot-container" v-for="(scenicSpotItem,scenicSpotIndex) in scenicSpotList" :key="scenicSpotIndex">
        <image
          class="scenic-spot-img"
          :src="scenicSpotItem.imgUrl"
          :lazy-load="true"
        />
      </view>
    </scroll-view>
    <!-- 阿坝文旅热点   -->
    <view class="hot-point-container">
      <img class="hot-point-img" src="http://img.jowong.com/aba/2025-03-20/jianz_1742435126884.png" alt="">
    </view>
    <view class="article-type-container">
      <view
          :class="[selectedArticleTypeIndex === index ? 'selected-article-type' : '','article-type']"
          v-for="(item,index) in 4" :key="index"
          @click="checkArticleType(index)"
      >
        <img
            v-show="index === selectedArticleTypeIndex"
            class="selected-article-type"
            src="https://c.abatour.com/zimg//0e2846cc2f28f752c64290b710f30da5?p=0"
        ></img>
        <view>热门景区</view>
      </view>
    </view>
    <view class="vlog-container">
      <VlogList></VlogList>
      <wd-loadmore
          custom-class="loadmore"
          state="loading"
          :loading-props="{color:'#26704e'}"
      ></wd-loadmore>
    </view>
    <wd-gap safe-area-bottom height="80"></wd-gap>
    <TabBar></TabBar>
    <!-- 开屏页弹出层   -->
    <wd-popup
        v-model="showSplashPage"
        position="right"
        custom-style="width: 100%;z-index:1000 !important;"
    >
      <view class="splash-container">
        <video
            :show-fullscreen-btn="false"
            :autoplay="true"
            :muted="true"
            :controls="false"
            :loop="true"
            object-fit="fill"
            class="splash-video"
            src="http://img.abatour.com/idx.mp4"
        ></video>
<!--        <view
            class="count-down"
            :style="{
              'margin-top': menuButtonInfo.top + 'px',
              'height': menuButtonInfo.height + 'px',
              'line-height': menuButtonInfo.height + 'px'
            }"
            @click="showSplashPage = false"
        >
          {{countDownNumber}}
          <text class="ml10">跳过</text>
        </view>-->
        <view class="tip-container flex flex-col items-center">
          <!-- <span class="new-badge">NEW</span> -->
          <!-- <view class="content mt30">文旅总入口</view> -->
        </view>
        <view class="operation-btn flex items-center justify-center" @click="showSplashPage = false">
          <text>触摸自然与文化的交融</text>
          <i class="iconfont icon-arrow-right ml20"></i>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup>
  import {ref} from "vue";
  import {onLoad,onPageScroll} from "@dcloudio/uni-app";
  import HeaderBar from "@/components/HeaderBar/index.vue";
  import VlogList from "@/components/Waterfull/index.vue";
  import TabBar from "@/components/TabBar/index.vue";
  import {styleSettingContent} from "@/api/system";
  import useIndex from "@/store/app"

  const indexStore = useIndex();

  const searchValue = ref("");
  const selectedArticleTypeIndex = ref(0);
  const grid = ref([
    [
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' }
    ],
    [
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' }
    ],
  ]);
  const loadingBanner = ref(false);
  const swiperImgList = ref([]);
  const homeBannerList = ref([]);
  const exploreList = ref([]);
  const scenicSpotList = ref([]);
  const headerBgc = ref("transparent");
  const titleColor = ref("#2D2D2D");
  const showSplashPage = ref(false);
  const countDownNumber = ref(10);
  const menuButtonInfo = ref({
    top: 0,
    height: 0
  });


  const startCountDown = () => {
    indexStore.setSplashLoadNumber();
    const timer = setInterval(() => {
      if(countDownNumber.value === 0) {
        clearInterval(timer);
        // 倒计时为0后自动关闭
        // showSplashPage.value = false;
        return;
      }
      countDownNumber.value --;
    },1000);
  };
  const handleSearch = () => {
    if(!searchValue.value) {
      uni.showModal({
        title: "提示",
        content: "请输入搜索内容",
        icon: "none",
        showCancel: false
      })
      return;
    }
    uni.navigateTo({
      url: `/ticketSubPack/pages/ticketScenicSpotSearch/index?searchValue=${searchValue.value}`
    })
  };
  const checkArticleType  = (index) => {
    selectedArticleTypeIndex.value = index;
  };

  const searchHomeSetting = async () => {
    loadingBanner.value = false;
    try {
      const res = await styleSettingContent({
        codes:"INDEX_BANNER,HOME_BANNER,INDEX_LIST,EXPLORE_FOODm,EXPLORE_HOTEL,EXPLORE_PLAY,SCENIC_SPOT_MAP"
      })
      const {
        INDEX_BANNER = [],
        HOME_BANNER = [],
        EXPLORE_PLAY = [],
        EXPLORE_HOTEL = [],
        SCENIC_SPOT_MAP = []
      } = res.result;
      console.log(HOME_BANNER,'HOME_BANNER');
      if (INDEX_BANNER.length > 0) {
        swiperImgList.value = INDEX_BANNER;
      }
      if (HOME_BANNER.length > 0) {
        homeBannerList.value = HOME_BANNER;
      }
      if(EXPLORE_PLAY.length > 0) {
        exploreList.value.push(EXPLORE_PLAY);
      }
      if(EXPLORE_HOTEL.length > 0) {
        exploreList.value.push(EXPLORE_HOTEL);
      }
      if(SCENIC_SPOT_MAP.length > 0) {
        scenicSpotList.value = SCENIC_SPOT_MAP;
      }
      console.log(scenicSpotList,'scenicSpotList')
      console.log(exploreList,'exploreList');
    } catch (error) {
      console.log(error,'获取首页配置失败')
    } finally {
      loadingBanner.value = true;
    }
  }
  const handleNavToParty = (item) => {
    console.log(item,'item')
    let navigationUrl;
    let {title} = item;
    switch (title) {
      case "景区门票":
        navigationUrl = "/ticketSubPack/pages/ticketHome/index"
        break;
      case "交通出行":
        navigationUrl = "/trafficSubPack/pages/trafficHome/index"
        break;
      case "酒店民宿":
        navigationUrl = "/hotelHomestay/pages/hotelPage/index"
        break;
      case "阿坝美食":
        navigationUrl = "/foodSubPack/pages/foodHome/index"
        break;
      case "阿坝优选":
        navigationUrl = "/specialtySubPack/pages/specialtyHome/index"
        break;
      case "精品线路":
        navigationUrl = "/premiumRouteSubPack/pages/premiumRouteHome/index"
        break;
      default:
        console.warn(`Unknown title: ${item.title}. Defaulting to home page.`);
        navigationUrl = "/pages/index/index"; // 默认跳转到首页
        break;
    }
    console.log(navigationUrl,'navigationUrl');
    uni.navigateTo({
      url:navigationUrl,
    });
  };
  const gotoFiveMajor = (item) => {
    let navigationUrl;
    switch (item) {
		case "hospitable":
			navigationUrl = "/fiveMajorSubPack/pages/hospitable/index"
			break;
		case "influence":
			navigationUrl="/fiveMajorSubPack/pages/influence/index"
			break
		case "homestay":
			navigationUrl="/fiveMajorSubPack/pages/homestay/index"
			break
		case "selfDriving":
			navigationUrl="/fiveMajorSubPack/pages/selfDriving/index"
			break
		case "studyAboard":
			navigationUrl="/fiveMajorSubPack/pages/studyAboard/index"
			break
		default:
			console.warn(`Unknown title: ${item.title}. Defaulting to home page.`);
			navigationUrl = "/pages/index/index"; // 默认跳转到首页
			break;
      }
    uni.navigateTo({
      url:navigationUrl,
    });
  };

  onLoad(() => {
    searchHomeSetting();
    menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
    console.log("home-onLoad");
  })
  onMounted(() => {
    let loadNumber = indexStore.getSplashLoadNumber;
    if (!loadNumber) {
      showSplashPage.value = true;
      startCountDown();
    }
  })
  onPageScroll((e) => {
    if(e.scrollTop > 110) {
      headerBgc.value = "#ffffff";
      titleColor.value = "#2D2D2D";
    } else {
      headerBgc.value = "transparent";
      titleColor.value = "#2D2D2D";
    }
  })

  onReachBottom(() => {
    console.log("reachBottom");
  })
</script>

<style lang="scss" scoped>
	
	.explore-title{
		width: 100%;
		position: absolute;
		top: 0rpx; 
		color: #fff;
		font-size: 38rpx;
		font-weight: 600;
		text-align: center; 
	}
  .main-container{
    min-height: 100vh;
    background-color: #feffea;
    :deep(.swiper-container) {
      position: relative;
      --wot-swiper-radius: 0;
    }

    .search-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      width: 555rpx;
      height: 69rpx;
      left: 50%;
      top: -34.5rpx;
      margin-left: -277.5rpx;
      border-radius: 34rpx;
      overflow: hidden;
      background-color: #FDFFEB;
      border: 2rpx solid #508963;
      box-shadow: -3rpx -1rpx 5rpx 0rpx rgba(0,0,0,0.17);
      .input-container{
        :deep(.custom-search-input-class) {
          background: #feffea;
          height: 69rpx;
          width: 430rpx;
          .wd-input__body {
            height: 69rpx;
            .wd-input__value{
              height: 100%;
              padding-left: 20rpx;
            }
          }
        }
      }
      .search-btn-container{
        flex: 1;
        border-top-left-radius: 35rpx;
        border-bottom-left-radius: 35rpx;
        text-align: center;
        background: #508963;
        height: 69rpx;
        line-height: 69rpx;
      }
    }
    .banner-container{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30rpx;
      padding: 0 28rpx;
      .banner-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .banner-img{
          width:84rpx;
          height:84rpx;
          background-size: cover;
        }
        .banner-title{
          font-size: 22rpx;
          color:#2B2B24;
          margin-top: 20rpx;
        }
      }

      :deep(.wd-skeleton__content) {
        width: 100% !important;
      }

    }
    .service-container{
      margin-top: 55rpx;
      display: flex;
      justify-content: space-between;
      padding: 0 28rpx;
      .left-service-container{
        .service-item{
          width: 333rpx;
          height: 190rpx;
          border-radius: 10rpx;
          overflow: hidden;
          .service-item-img{
            width:100%;
            height:100%;
            background-size: cover;
          }
        }
        .service-item:last-child{
          margin-top: 38rpx;
        }
      }
      .right-service-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .service-item{
          width: 333rpx;
          height: 121rpx;
          border-radius: 10rpx;
          overflow: hidden;
          .service-item-img{
            width:100%;
            height:100%;
            background-size: cover;
          }
        }
      }
    }
    .phase-container{
      margin-top: 82rpx;
      padding: 0 28rpx;
      .phase-img{
        width: 284rpx;
        height: 73rpx;
        background-size: cover;
      }
    }
    .explore-container{
      width: 100%;
      margin-top: 36rpx;
      height: 612rpx;
      white-space: nowrap;
      .explore-item-container {
        position: relative;
        display: inline-block;
        width: 451rpx;
        height:612rpx;
        margin-left: 28rpx;
        overflow: hidden;
        .explore-img{
          height: 612rpx;
          width: 100%;
          background-size: cover;
        }
        .product-list-container{
          position: absolute;
          top: 73rpx;
          left: 50%;
          margin-left: -213rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 416rpx;
          height: 486rpx;
          border-radius: 10rpx;
          padding: 15rpx;
          overflow: hidden;
          box-sizing: border-box;
          background: #FFFAF0;
          .product-item-container{
            .product-info-container{
              display: flex;
              .product-img {
                width:97rpx;
                height:97rpx;
                border-radius: 10rpx;
                overflow: hidden;
                background-size: cover;
              }
              .product-content-container{
                flex:1;
                overflow: hidden;
                margin-left: 16rpx;
                .product-name {
                  font-size: 25rpx;
                  margin-top: 8rpx;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  color: #44423D;
                }
                .product-description {
                  font-size: 22rpx;
                  margin-top: 12rpx;
                  color: #44423D;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }
      .explore-item-container:last-child{
        margin-right: 28rpx;
      }
    }
    .map-container {
      margin-top: 83rpx;
      padding: 0 28rpx;
      .map-img {
        height: 66rpx;
        width: 318rpx;
        background-size: cover;
      }
    }
    .scenic-spot-map-container{
      width: 100%;
      margin-top: 45rpx;
      height: 340rpx;
      white-space: nowrap;
      .scenic-spot-container {
        display: inline-block;
        width: 213rpx;
        height: 340rpx;
        margin-left: 27rpx;
        .scenic-spot-img{
          width: 100%;
          height: 100%;
          background-size: cover;
        }
      }
      .scenic-spot-container:last-child{
        margin-right: 28.5rpx;
      }
    }
    .hot-point-container{
      margin-top: 82rpx;
      padding: 0 28rpx;
      .hot-point-img{
        width: 345rpx;
        height: 114rpx;
      }
    }
    .article-type-container{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 28rpx;
      margin-top: 53rpx;
      margin-bottom: 54rpx;
      .article-type{
        position: relative;
        .selected-article-type{
          position: absolute;
          left: -4rpx;
          top: -4rpx;
          width: 41rpx;
          height: 41rpx;
          background-size: cover;
        }
      }
      .selected-article-type{
        color: #AA5414;
      }
    }
    .vlog-container {
      padding: 0 28rpx;
    }
    .splash-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      .splash-video {
        height: 100%;
        width: 100%;
      }
      .count-down {
        border: 2rpx solid #FFFFFF;
        border-radius: 20rpx;
        position: absolute;
        left: 4%;
        top: 0;
        padding: 0 20rpx;
        color: #FFFFFF;
      }
      .tip-container {
        position: absolute;
        right: 26%;
        top: 32%;
        .new-badge {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: white;
          color: #6b3e26;
          font-size: 28rpx;
          font-weight: bold;
          padding: 4rpx 0;
          border-radius: 30px 999px 999px 999px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          writing-mode: vertical-rl;
        }
        .content {
          letter-spacing: 10rpx;
          color: #fff;
          font-size: 34rpx;
          font-weight: bold;
          font-family: 宋体;
          writing-mode: vertical-rl;
        }
      }
      .operation-btn {
        position: absolute;
        bottom: 200rpx;
        left: 50%;
        margin-left: -244rpx;
        width: 489rpx;
        height: 74rpx;
        color: #FFFFFF;
        background: url("http://img.abatour.com/2025-05-09/%E7%9F%A9%E5%BD%A2%20988_1746770166950.png") no-repeat;
        background-size: cover;
        .icon-arrow-right {
          font-size: 40rpx;
          color: #FFFFFF;
        }
      }
    }
  }
</style>
